<template>
  <div class='randoms-container'>
    <el-card class="randoms-card">
      <!-- 搜索表单 -->
      <el-form :inline="true" ref="form" :model="form" class="demo-form-inline">
        <el-form-item label="关键字" prop="keyword">
          <el-input v-model="form.keyword" placeholder="根据编号搜索"></el-input>
        </el-form-item>
        <el-form-item class="search_btn">
          <el-button @click="hClear" size="small">清除</el-button>
          <el-button type="primary" @click="hQuery" size="small" :loading="isLoading">搜索</el-button>
        </el-form-item>
      </el-form>
      <!-- 总数据alert -->
      <el-alert
        :title="totalCounts"
        type="info"
        show-icon>
      </el-alert>
      <!-- 表格数据 -->
      <el-table
        :data="randomsList"
        v-loading="isLoading"
        class="randoms-table"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="编号"
          width="220">
        </el-table-column>
        <el-table-column
          prop="questionType"
          label="题型">
          <template slot-scope="scope">
            <div v-for="type in questionType" :key="type.value">
              <span v-if="Number(scope.row.questionType) === type.value">{{ type.label }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="questionIDs"
          label="题目编号"
          width="220">
          <template slot-scope="scope">
            <!-- {{scope.row.questionIDs[0].number}} -->
            <el-link v-for="(val,index) in scope.row.questionIDs"
            :key="index"
            :underline="false"
            @click="loadQuestions(val.id)"
            type="primary">
            {{val.number}}</el-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="addTime"
          label="录入时间"
          width="180">
        </el-table-column>
        <el-table-column
          prop="totalSeconds"
          label="答题时间(s)">
        </el-table-column>
        <el-table-column
          prop="accuracyRate"
          label="正确率(%)">
        </el-table-column>
        <el-table-column
          prop="userName"
          label="录入人">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="hDelete(scope.$index, scope.row)"
              icon="el-icon-delete"
              circle plain></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="block">
        <el-pagination
          class="randoms-page"
          :disabled="isLoading"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[20, 30, 50, 100]"
          layout="prev, pager, sizes, jumper"
          :total="counts">
        </el-pagination>
      </div>
    </el-card>
    <!-- 预览框弹层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogPreview"
      width="60%"
      v-if="dialogPreview">
      <questions-preview :subID='questionId' @close='dialogPreview=false'></questions-preview>
    </el-dialog>
  </div>
</template>
<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import { questionType } from '@/api/hmmm/constants'
import QuestionsPreview from '../components/questions-preview.vue'
export default {
  components: { QuestionsPreview },
  name: 'questionsRandoms',
  data () {
    return {
      randomsList: [], // 题组数据
      page: 1, // 当前页
      pagesize: 20, // 页大小
      counts: 0, // 总数据数
      isLoading: false,
      form: {
        keyword: null // 关键字
      },
      questionId: null, // 预览框Id
      dialogPreview: false
    }
  },
  created () {
    this.loadRandoms()
  },
  // 监听
  computed: {
    // 总数据
    totalCounts () {
      return '数据一共' + this.counts + '条'
    },
    // 题目类型
    questionType () {
      return questionType
    }
  },
  methods: {
    // 收集参数
    buildParams () {
      const paramsObj = {
        page: this.page,
        pagesize: this.pagesize,
        keyword: this.form.keyword
      }
      return paramsObj
    },
    // 获取题组数据
    async loadRandoms () {
      this.isLoading = true
      // 1. 组装参数
      const paramsObj = this.buildParams()
      // 2. 发送请求
      try {
        const res = await randoms(paramsObj)
        const { counts, items } = res.data
        this.counts = counts
        this.randomsList = items
        this.isLoading = false
      } catch (err) {
        // console.log(err)
        this.isLoading = false
      }
    },
    // 点击查询
    hQuery (keyword) {
      // 1. 重置页码为1
      this.page = 1
      // 2. 重新请求
      this.loadRandoms()
    },
    // 点击清除
    hClear () {
      this.$refs.form.resetFields()
    },
    // 处理页码大小
    handleSizeChange (pagesize) {
      // 1. 更新页码大小
      this.pagesize = pagesize
      // 2. 重置页码为 1
      this.page = 1
      // 3. 重发请求
      this.loadRandoms()
    },
    // 当前页变动时
    handleCurrentChange (curPage) {
      // 1. 更新页码
      this.page = curPage
      // 2. 重发请求
      this.loadRandoms()
    },
    // 删除题组
    async doDelete (id) {
      try {
        await removeRandoms({ id })
        this.$message.success('删除成功!')
        this.loadRandoms()
      } catch (err) {
        console.log(err)
        this.$message.error('删除失败!')
      }
    },
    hDelete (index, row) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const id = row.id
        this.doDelete(id)
      }).catch(() => {
        //  no
      })
    },
    // 预览框弹层
    loadQuestions (id) {
      this.dialogPreview = true
      this.questionId = id
    }
  }
}
</script>

<style scoped lang='css'>
.randoms-card {
  margin : 10px;
}
.demo-form-inline {
  margin-left: 20px;
}
.search_btn {
  float: right;
}
.randoms-table{
  margin-top: 15px;
  margin-bottom: 20px;
}
.randoms-page {
  text-align: right;
}
</style>
